{% extends 'base.html' %}

{% block title %}分配角色 - {{ target_user.get_full_name|default:target_user.username }} - 请假审批系统{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>分配用户角色</h2>
        <p>为用户 <strong>{{ target_user.get_full_name|default:target_user.username }}</strong> ({{ target_user.username }}) 分配角色和权限</p>
    </div>

    <form method="post">
        {% csrf_token %}

        <!-- 用户基本信息 -->
        <div style="background-color: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
            <h3 style="margin-bottom: 1rem; color: #333;">用户信息</h3>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
                <div>
                    <strong>用户名：</strong> {{ target_user.username }}
                </div>
                <div>
                    <strong>姓名：</strong> {{ target_user.get_full_name|default:'未设置' }}
                </div>
                <div>
                    <strong>邮箱：</strong> {{ target_user.email|default:'未设置' }}
                </div>
                <div>
                    <strong>工号：</strong> {{ user_profile.employee_id|default:'未设置' }}
                </div>
                <div>
                    <strong>注册时间：</strong> {{ target_user.date_joined|date:"Y-m-d H:i" }}
                </div>
                <div>
                    <strong>最后登录：</strong> {{ target_user.last_login|date:"Y-m-d H:i"|default:'从未登录' }}
                </div>
            </div>
        </div>

        <!-- 角色分配表单 -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
            <div>
                <div class="form-group">
                    <label for="{{ form.role.id_for_label }}">{{ form.role.label }}</label>
                    {{ form.role }}
                    {% if form.role.help_text %}
                        <small style="color: #666; font-size: 0.875rem;">{{ form.role.help_text }}</small>
                    {% endif %}
                    {% if form.role.errors %}
                        <div style="color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem;">
                            {{ form.role.errors }}
                        </div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.department.id_for_label }}">{{ form.department.label }}</label>
                    {{ form.department }}
                    {% if form.department.errors %}
                        <div style="color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem;">
                            {{ form.department.errors }}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div>
                <div class="form-group">
                    <label for="{{ form.supervisor.id_for_label }}">{{ form.supervisor.label }}</label>
                    {{ form.supervisor }}
                    {% if form.supervisor.help_text %}
                        <small style="color: #666; font-size: 0.875rem;">{{ form.supervisor.help_text }}</small>
                    {% endif %}
                    {% if form.supervisor.errors %}
                        <div style="color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem;">
                            {{ form.supervisor.errors }}
                        </div>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="{{ form.annual_leave_days.id_for_label }}">{{ form.annual_leave_days.label }}</label>
                    {{ form.annual_leave_days }}
                    {% if form.annual_leave_days.help_text %}
                        <small style="color: #666; font-size: 0.875rem;">{{ form.annual_leave_days.help_text }}</small>
                    {% endif %}
                    {% if form.annual_leave_days.errors %}
                        <div style="color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem;">
                            {{ form.annual_leave_days.errors }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 角色权限说明 -->
        <div style="background-color: #e7f3ff; padding: 1.5rem; border-radius: 8px; margin: 2rem 0;">
            <h4 style="margin-bottom: 1rem; color: #0066cc;">角色权限说明</h4>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; font-size: 0.9rem;">
                <div>
                    <strong>员工：</strong><br>
                    • 申请请假<br>
                    • 查看自己的申请记录<br>
                    • 取消未审批的申请
                </div>
                <div>
                    <strong>主管：</strong><br>
                    • 员工的所有权限<br>
                    • 审批下属的请假申请<br>
                    • 查看下属的申请记录
                </div>
                <div>
                    <strong>人事：</strong><br>
                    • 主管的所有权限<br>
                    • 审批所有请假申请<br>
                    • 查看所有用户的申请记录<br>
                    • 管理用户角色
                </div>
                <div>
                    <strong>管理员：</strong><br>
                    • 人事的所有权限<br>
                    • 系统管理权限<br>
                    • 用户管理权限<br>
                    • 数据统计和报表
                </div>
            </div>
        </div>

        <!-- 提交按钮 -->
        <div style="display: flex; gap: 1rem; justify-content: flex-end;">
            <a href="{% url 'user_management' %}" class="btn btn-secondary">取消</a>
            <button type="submit" class="btn btn-primary">保存更改</button>
        </div>
    </form>
</div>

<!-- 当前角色状态 -->
{% if user_profile.role %}
<div class="card">
    <div class="card-header">
        <h3>当前状态</h3>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
        <div class="stat-card">
            <div class="stat-number">{{ user_profile.get_role_display }}</div>
            <div class="stat-label">当前角色</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ user_profile.department.name|default:'未分配' }}</div>
            <div class="stat-label">所属部门</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">
                {% if user_profile.supervisor %}
                    {{ user_profile.supervisor.user.get_full_name|default:user_profile.supervisor.user.username }}
                {% else %}
                    无
                {% endif %}
            </div>
            <div class="stat-label">直属上级</div>
        </div>
        <div class="stat-card">
            <div class="stat-number">{{ user_profile.annual_leave_days }}</div>
            <div class="stat-label">年假天数</div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}
